<template>
  <div class="webHomepage">
    <div class="homepage">
      <div :class="['h-left', isImgUrl == true ? 'active' : '']">
        <span>暂无照片</span>
        <div class="img-box" v-if="isImgUrl">
          <img :src="headUrl" alt="" />
        </div>
        <router-link to="/home/set/head">上传头像</router-link>
        <div v-if="isNull" class="myautograph">
          <p>
            <span>“{{ autograph }}”</span>
          </p>
        </div>
      </div>
      <div class="h-right">
        <div class="h-r-top">
          <p>
            {{ timeObj.year }}年{{ timeObj.month }}月{{ timeObj.day }}日<span
              >星期{{ timeObj.weekend }}</span
            >
          </p>
          <p>
            <img src="../assets/images/flower.png" alt="" />
            <b>×</b><span> {{ todayArray.length }}</span>
          </p>
        </div>
        <div class="diary-list">
          <ul>
            <li v-for="item in todayArray" :key="item.id">
              <span>{{ item.time }}</span>
              <p>{{ item.content }}</p>
            </li>
          </ul>
        </div>
        <div class="author-name">
          <p>--{{ userName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "webHomepage",
  data() {
    return {
      isNull: false,
    };
  },
  computed: {
    ...mapState([
      "userName",
      "headUrl",
      "isImgUrl",
      "timeObj",
      "todayArray",
      "autograph",
    ]),
  },
  mounted() {
    // console.log(this.$store.state.autograph);
    if (this.$store.state.autograph.length != 0) {
      this.isNull = true;
    } else {
      this.isNull = false;
    }
  },
};
</script>

<style lang="less" scoped>
.webHomepage {
  width: 100%;
  .homepage {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
    .h-left {
      width: 280px;
      height: 280px;
      border: 5px dashed #808080;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      &.active {
        border: 0;
      }
      .myautograph {
        position: absolute;
        bottom: -37px;
        p {
          width: 200px;
          font-size: 24px;
          color: #808080;
          // display: flex;
          text-align: center;

          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          span {
            // display: inline-block;
            // width: 100%;
            color: #303030;
            font-size: 18px;
          }
        }
      }
      span {
        margin-right: 5px;
      }
      .img-box {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 3px 3px;
        background-color: #fff;
        box-shadow: 1px 1px 2px 2px #e6e4e4;
        img {
          width: 100%;
          height: 100%;
        }
      }
      a {
        color: #808080;
        font-size: 16px;
      }
    }
    .h-right {
      width: 550px;
      padding: 0 30px;
      box-sizing: border-box;
      .h-r-top {
        width: 100%;
        display: flex;
        padding-bottom: 4px;
        border-bottom: 2px solid #8fa5ab;
        p {
          width: 100%;
          color: #808080;
          font-size: 16px;
          font-weight: bold;
          &:nth-of-type(2) {
            text-align: right;
            b {
              font-size: 14px;
            }
            img {
              margin-right: 10px;
              margin-bottom: -2px;
            }
            span {
              font-size: 16px;
            }
          }
        }
      }
      .diary-list {
        width: 100%;
        ul {
          width: 100%;
          li {
            font-size: 16px;
            margin: 15px 0;
            span {
              color: #808080;
            }
            p {
              width: 100%;
              color: #000;
              font-weight: bold;
              font-size: 18px;
              padding: 0 15px;
              margin-top: 5px;
              word-wrap: break-word;
              word-break: break-all;
              // word-break: keep-all;
              line-height: 24px;
            }
          }
        }
      }
    }
    .author-name {
      position: absolute;
      bottom: 0;
      right: 0;
      p {
        font-size: 16px;
        color: #808080;
        font-weight: bold;
        text-align: right;
      }
    }
  }
}
</style>